<div ng-include="'main/_/top.html'"></div>

<div style="overflow:auto;height:100%">

  <div class="clearfix" style="height:40px;"></div>

  <div class="col-sm-8 col-sm-offset-2">
    <div class="panel panel-default shadow10">

      <div class="panel-heading pd0" style="border:0">
        <ul class="nav nav-tabs">
          <li role="presentation">
            <a href="">{{'auth.accessLogin'|translate}}</a>
          </li>
        </ul>
      </div>

      <div class="panel-body">
        <form class="form-horizontal" name="form1" ng-submit="onSubmit(form1)">
          <div class="form-group has-feedback" ng-class="{'has-error': !form1.endpoint.$valid }">
            <label for="aid" class="col-sm-4 control-label">
              <span class="red">*</span> Endpoint:</label>
            <div class="col-sm-7">
              <select required ng-model="selectedCloud" class="form-control" id="endpoint" name="endpoint">
                <option ng-repeat="cloud in clouds" value="{{cloud.value}}">{{cloud.name|translate}}</option>
              </select>
            </div>
            <div class="col-sm-1">
              <button type="button" class="btn btn-md pull-right" ng-if="selectedCloud == 'customized'" ng-click="showCustomizedCloud()">
                <i class="glyphicon glyphicon-cog"></i>
                <input type="hidden" is-cloud-configured ng-model="privateCloud" />
              </button>
            </div>
          </div>
          <div class="form-group has-feedback" ng-class="{'has-error': !form1.aid.$valid }">
            <label for="aid" class="col-sm-4 control-label">
              <span class="red">*</span> AccessKeyId:</label>
            <div class="col-sm-7">
              <input type="text" required ng-model="item.id" class="form-control" id="aid" name="aid" placeholder="{{'auth.id.placeholder'|translate}}">
            </div>
            <div class="col-sm-1"></div>
          </div>
          <div class="form-group has-feedback" ng-class="{'has-error': !form1.akey.$valid }">
            <label for="akey" class="col-sm-4 control-label">
              <span class="red">*</span> AccessKeySecret:</label>
            <div class="col-sm-7">
              <input type="password" required ng-model="item.secret" class="form-control" id="akey" name="akey" placeholder="{{'auth.secret.placeholder'|translate}}">
            </div>
            <div class="col-sm-1"></div>
          </div>
          <div class="form-group has-feedback" ng-if="item.remember" ng-class="{'has-error': !form1.ades.$valid }">
            <label for="ades" class="col-sm-4 control-label">{{'auth.description'|translate}}:</label>
            <div class="col-sm-7">
              <i class="fa fa-question-circle" style="position: absolute; padding: 10px;" uib-tooltip="{{'auth.description.placeholder'|translate}}" tooltip-is-open="form1.ades.$invalid" tooltip-placement="top" tooltip-append-to-body="true"></i>
              <input type="text" ng-maxlength="20" ng-model="item.description" class="form-control" id="ades" name="ades" placeholder="{{'auth.description.placeholder'|translate}}" style="padding-left: 32px;">
            </div>
            <div class="col-sm-1"></div>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-4 col-sm-3">
              <input type="checkbox" id="remember-sk" ng-model="item.remember" />
              <label for="remember-sk">
                {{'auth.remember'|translate}}
              </label>
              <i class="fa fa-question-circle" style="position: absolute; padding: 0.2em;" uib-tooltip="{{'auth.remember.popup.msg1'|translate}}" tooltip-placement="top" tooltip-append-to-body="true"></i>
            </div>
            <div class="col-sm-2"></div>
            <div class="col-sm-2">
              <button type="button" class="btn btn-sm btn-link pull-right" style="padding-right: 0;" ng-click="showAkHistories()">{{'auth.akHistories'|translate}}</button>
            </div>
            <div class="col-sm-1"></div>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-4 col-sm-8">
              <button type="submit" class="btn btn-primary" ng-disabled="!form1.$valid">
                {{'auth.login'|translate}}
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
